<template>
  <div>
    <el-form
      :inline="true"
      ref="fromdata"
      :model="fromdata"
      label-width="130px"
      label-position="right"
    >
      <el-row align="middle">
        <el-col :span="4">
          工单基础信息
        </el-col>
        <el-col :span="20">
          <Options
            :fromdata="fromdata"
            :workOrderId="workOrderId"
            :workOrderType="workOrderType"
          />
        </el-col>
      </el-row>
      <el-divider content-position="center"></el-divider>
      <el-row>
        <el-col :span="6">
          <el-form-item label="工单单号:">
            <div>{{fromdata.workOrderCode}}</div>
          </el-form-item>
        </el-col>
        <el-col :span="6">
          <el-form-item label="所属门店:">
            <div>{{fromdata.storeName}}</div>
          </el-form-item>
        </el-col>
        <el-col :span="6">
          <el-form-item label="服务接待:">
            <div>{{fromdata.receptionName}}</div>
          </el-form-item>
        </el-col>
        <el-col :span="6">
          <el-form-item label="使用优惠劵:">
            <div class="colorF40">{{couponAmuount}}<Coupon
                :list="fromdata.couponDomains"
                :show="true"
              >
                <i class="el-icon-arrow-down" />
              </Coupon>
            </div>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="6">
          <el-form-item label="单据日期:">
            <div>{{fromdata.receiveCarTime}}</div>
          </el-form-item>
        </el-col>
        <el-col :span="6">
          <el-form-item label="接车时间:">
            <div>{{fromdata.receiveCarTime}}</div>
          </el-form-item>
        </el-col>
        <el-col :span="6">
          <el-form-item label="工单配件数量:">
            <div>{{fromdata.partsNumber}}</div>
          </el-form-item>
        </el-col>
        <el-col :span="6">
          <el-form-item label="预付款金额:">
            <div class="colorF40">{{fromdata.imprest}}</div>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="6">
          <el-form-item label="工单状态:">
            <div>{{fromdata.status}}</div>
          </el-form-item>
        </el-col>
        <el-col :span="6">
          <el-form-item label="工单应收金额:">
            <div class="colorF40">{{fromdata.shouldAmount}}</div>
          </el-form-item>
        </el-col>
        <el-col :span="6">
          <el-form-item label="付款状态:">
            <div>{{fromdata.payStatus}}</div>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="12">
          <el-form-item label="故障描述:">
            <div>{{fromdata.faultDesc}}</div>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="工单备注:">
            <div>{{fromdata.remark}}</div>
          </el-form-item>
        </el-col>
      </el-row>
    </el-form>

    <div v-if="setpsList != null && setpsList.length > 0">
      <el-row>
        <el-col>工单作业进度</el-col>
      </el-row>
      <el-divider content-position="center"></el-divider>
      <Steps :setpsList="setpsList" />
    </div>
  </div>
</template>

<script>

import Options from "./components/options";
import { Steps, Coupon, QRCode } from "@/components/index";
export default {
  components: { Steps, Coupon, QRCode, Options },
  props: {
    fromdata: {
      type: Object,
      default: () => ({})
    },
    workOrderId: {
      type: Number | String,
    },
    workOrderType: {
      type: Number | String,
      default: 1,//默认快速单子
    }
  },
  data () {
    return {
      tableColumnAttributes: [
        { name: '所属门店', value: 'storeId', type: 'text' },
        { name: '车牌号', value: 'licensePlateNumber', type: 'text' },
        { name: '品牌', value: 'carRank', type: 'text' },
        { name: '车系', value: 'carTypeId', type: 'text' },
        { name: '年款', value: 'clientName', type: 'text' },
        { name: '车型', value: 'carTypeId', type: 'text' },
        { name: '车色', value: 'carColor', type: 'text' },
        { name: '里程数', value: 'mileage', type: 'text' },
        { name: '交强险公司', value: 'companyName', type: 'text' },
        { name: '交强险到期', value: 'insureExpireDate', type: 'text' },
        { name: '备注', value: 'remark', type: 'text' },
        { name: '录入时间', value: 'createTime', type: 'text' },
      ],
      rules: [],
      visible: false,
      dialogTitle: '',

    }
  },
  computed: {
    setpsList () {
      return this.fromdata[this.$parent.getConfig.orderStatusListField];
    },
    couponAmuount () {
      let sum = 0, coupList = this.fromdata.couponDomains;
      if (Array.isArray(coupList) && coupList.length > 0) {
        coupList.map(item => {
          sum += item.denomination;
        })
      }
      return sum;
    }
  },
  async created () {
  },
  methods: {},
  mounted () {
  }
}
</script>

<style lang="scss" scoped>
.el-table .delete-row {
  background: #f5f7fa;
  color: #ccc !important;
}
.avatar-uploader .el-upload {
  border: 1px dashed #d9d9d9;
  border-radius: 6px;
  cursor: pointer;
  position: relative;
  overflow: hidden;
}
.avatar-uploader .el-upload:hover {
  border-color: #409eff;
}
.avatar-uploader-icon {
  font-size: 28px;
  color: #8c939d;
  width: 178px;
  height: 178px;
  line-height: 178px;
  text-align: center;
}
.avatar {
  width: 80px;
  height: 80px;
  display: block;
}
.colorF40 {
  color: #f40;
}
</style>
